<template>
  <div>
    <div class="card" @click="active = !active">
      <span class="plus">+</span>
      <span>新建项目 </span>
    </div>
    <CreateProjectModal
      :active="active"
      @changeActive="changeActive"
      @refresh="$emit('refresh')"
    />
  </div>
</template>
<script setup lang="ts">
import CreateProjectModal from "@/UI/components/projects/createProjectModal.vue";
import { ref, defineEmits } from "vue";
let active = ref(false);
function changeActive(value: boolean) {
  active.value = value;
}
const emits = defineEmits(["refresh"]);
</script>
<style lang="less" scoped>
.card {
  box-sizing: border-box;
  background-color: transparent;
  height: 268px;
  border-radius: 4px;
  border: 1px dashed #ced4da;
  display: flex;
  justify-content: center;
  align-items: center;
  flex-direction: column;
  font-size: 14px;
  line-height: 22px;
  font-weight: 400;
  color: #495057;
  font-family: PingFang SC;
  cursor: pointer;
  .plus {
    display: flex;
    justify-content: center;
    align-items: center;
    width: 13px;
    height: 13px;
    border: 1.5px solid #868e96;
    border-radius: 50%;
    font-size: 12px;
    text-align: center;
    line-height: 1;
    font-weight: 800;
    color: #868e96;
    margin-bottom: 4px;
    padding-bottom: 1px;
    padding-left: 0.2px;
  }
  &:hover {
    border-color: #339af0;
    color: #339af0;
    .plus {
      border-color: #339af0;
      color: #339af0;
    }
  }
}
</style>
